@import "@common/style/common.styl";
.topicWrapper
  padding 20px 0 10px 0
  overflow hidden
  margin-left: -18px

  .topicItem
    float: left
    height: 32px
    line-height: 32px
    font-size 14px
    border 1px solid #dcdcdc
    border-radius 3px
    padding-right: 10px
    margin-left: 18px;
    margin-bottom: 16px

    .topicPic
      width 32px
      height: 32px
      float: left;
      margin-right: 10px

.articleWrapper
  display flex
  flex-direction: column

  .articleItem
    display: flex
    border-bottom: 1px solid $border-color
    align-items: center

    &:last-child
      margin-bottom: 10px;

    &:first-child
      border-top: 1px solid $border-color;

    .left-panel
      flex: 1
      height: 144px
      padding-right 30px

      .title
        display block
        margin-top 22px
        font-size 19px
        font-weight 600
        &:hover
          color: #EB6F5A

      .desc
        margin-top 20px
        font-size 15px
        line-height 22px
        color #adadad
        text-overflow: ellipsis
        overflow hidden
        display -webkit-box
        -webkit-line-clamp: 3
        -webkit-box-orient: vertical

    .right-img
      width 156px
      height 105px
      border-radius: 4px

.button
  width: 100%;
  height 45px
  background-color: #ff5757;
  font-size 18px
  line-height 45px
  text-align center
  border-radius 8px
  color #fff

  &:hover
    background-color: #fd1919;

.board
  margin-top: 25px;
  width: 280px
  .recommend
    margin-bottom: 10px;
    img
      width 100%

.writerWrapper
  margin-top: 30px
  .head
    font-size 15px
    color #969696
  .writer
    display flex
    align-items center
    margin-bottom 15px
    &:nth-child(2)
      margin-top: 10px;
    .avatar
      border-radius 50%
      width: 48px
      height: 48px
      border 1px solid #ccc
    .info
      margin-left: 10px;
      flex 1
      .name
        font-size 16px
        margin-bottom 10px
      .desc
        font-size 14px
        color #969696

